<template>
  <TwoDialog id="addSupplier" v-model="showDialog" title="供应商" width="700px" @submit="handlerSave"
    @close="handlerCancel">
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="工厂名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="工厂简介" prop="introduc">
        <el-input v-model="form.introduc" />
      </el-form-item>
      <el-form-item label="联系电话" prop="telephoneNumber">
        <el-input v-model="form.telephoneNumber" />
      </el-form-item>
      <el-form-item label="网店地址" prop="onlineStore">
        <el-input v-model="form.onlineStore" />
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="form.contact" />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="支付宝名称" prop="alipayName">
        <el-input v-model="form.alipayName" />
      </el-form-item>
      <el-form-item label="支付宝账号" prop="alipayAccount">
        <el-input v-model="form.alipayAccount" />
      </el-form-item>
      <el-form-item label="银行名称" prop="bankType">
        <el-input v-model="form.bankType" />
      </el-form-item>
      <el-form-item label="银行卡账号" prop="cardAccount">
        <el-input v-model="form.cardAccount" />
      </el-form-item>
      <el-form-item label="银行卡名称" prop="cardName">
        <el-input v-model="form.cardName" />
      </el-form-item>
    </el-form>
  </TwoDialog>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive } from 'vue';
import api from '/@/api/email/index';
import { ElMessage } from 'element-plus';

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const ruleFormRef = ref()
const form = ref(props.data);
const rules = reactive({
  name: [{ required: true, message: '请填写工厂名称', trigger: 'change' }],
  telephoneNumber: [{ required: true, message: '请填写联系电话', trigger: 'change' }],
})
const showDialog = ref(false);

const emit = defineEmits(['close', 'refresh']);

const handlerCancel = () => {
  showDialog.value = false;
  emit('close');
};

const handlerSave = async () => {
  await ruleFormRef.value.validate(async (valid: any, fields: any) => {
    if (valid) {
      const saveFun = form.value.id ? api.factory.edit : api.factory.add;
      const { code, data } = await saveFun(form.value);
      if (code === 200) {
        ElMessage({ type: 'success', message: '操作成功' });
        showDialog.value = false;
        emit('close', true);
        emit('refresh', data)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
};

defineExpose({
  showDialog
})
</script>
<style lang="scss" scoped></style>